<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;height: 56px;">
			<el-form :inline="true" :model="filters">
				<el-form-item>
					<el-button type="warning" @click="emitJumpPage">新增领导</el-button>
				</el-form-item>
				<el-form-item class="sort">
					<el-button type="info" @click="fnSaveSolt" :disabled="hasSolt">保存排序</el-button>
				</el-form-item>
			</el-form>
		</el-col>

		<!--领导列表-->
		<el-table :data="leaders" border v-loading="leadersLoading" class="leader-list">
			<el-table-column type="index" label="#" width="60">
			</el-table-column>
			<el-table-column label="领导">
				<template scope="scope">
					<p class="update-leader" @click="fnOpenAddLeader(scope.row.EmpID,scope.row.EmpName)">{{scope.row.EmpName}} - {{scope.row.EmpID}}</p>
				</template>
			</el-table-column>
			<el-table-column prop="Title" label="职务">
			</el-table-column>
			<el-table-column prop="Remark" label="职责">
			</el-table-column>
			<el-table-column label="操作" width="130">
				<template scope="scope">
				    <i class="el-icon-custom-upward sort-icon" @click="fnSortUpward(scope.$index)"></i>
				    <i class="el-icon-custom-down sort-icon" @click="fnSortDown(scope.$index)"></i>
				    <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
				      	<el-button type="danger" size="mini" icon="custom-delete"  @click="fnDelete(scope.row.ID)"></el-button>
				    </el-tooltip>
				</template>
			</el-table-column>
		</el-table>
		
		<!--更新领导信息-->
		<el-dialog title="更新领导信息" v-model="addFormVisible" :close-on-click-modal="false" class="add-dialog">
			<el-form :model="addForm" label-width="100px" :rules="addFormRules" ref="addForm">
				<el-form-item label="领导姓名">{{current.name}}</el-form-item>
				<el-form-item label="领导照片">
					<el-upload class="avatar-uploader" :action="'/api/doc/avatar/leader/' + current.account" :show-file-list="false" :on-success="handleAvatarSuccess">
						<img v-if="imageUrl" :src="imageUrl" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item>
				<el-form-item label="领导职务">
					<el-input v-model="addForm.Title" placeholder="请输入领导职务"></el-input>
				</el-form-item>
				<el-form-item label="领导职责">
					<el-input v-model="addForm.Remark" type="textarea" :rows="2" placeholder="请输入领导的工作职责"></el-input>
				</el-form-item>
				<el-form-item label="办公室电话">
					<el-input v-model="addForm.Phone" placeholder="请输入领导办公室电话"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="fnAddLeader">提交</el-button>
			</div>
		</el-dialog>
	</section>
</template>

<script>
	import Vue from 'vue'
	import Svc from '../../service/index.js'
	import moment from 'moment'
	export default {
		data() {
				return {
					filters : {
						name :''
					},
					leadersLoading : false,
					leaders :[],
					hasSolt : true,
					//更新内容
					addForm : {
						Photo : '',//领导头像（提交用）
						Title : '',
						Remark : '',
						Phone : ''					
					},
					imageUrl : '', //领导头像（展示用）
					addFormVisible : false,
					//新增验证
					addFormRules : {},
					//当前添加为领导的员工的信息
					current : {
						account : '',
						name : ''
					}
				}
			},
			methods: {
				//自定义事件->组件跳转
				emitJumpPage(){
					this.$emit('jump-page','add')
				},
	            //显示message提示框
	            openMessage : function(msg,type){
	    	        this.$message({
			          	showClose: true,
			          	message: msg,
			          	type: type
			        });
			    },
			    //排序 -> 上移
			    fnSortUpward(index){
			    	var that = this
			    	if (index != 0) {
			    		var oldValue = that.leaders[index]
			    		var newValue = that.leaders[index-1]
			    		Vue.set(that.leaders, index, newValue)
			    		Vue.set(that.leaders, index-1, oldValue)
			    		that.hasSolt = false
			    	}
			    },
			    //排序 -> 下移
			    fnSortDown(index){
			    	var that = this
			    	if (index != that.leaders.length - 1) {
			    		var oldValue = that.leaders[index]
			    		var newValue = that.leaders[index+1]
			    		Vue.set(that.leaders, index, newValue)
			    		Vue.set(that.leaders, index+1, oldValue)
			    		that.hasSolt = false
			    	}
			    },
			    //保存排序
			    fnSaveSolt(){
			    	var that = this
			    	var leaderIds = []
			    	for (var i=0;i<that.leaders.length;i++) {
			    		leaderIds.push(parseInt(that.leaders[i].ID))
			    	}
			    	
			    	Svc.fnPostData('/api/leader/adjust',{IDs : leaderIds},function(res){
		            	if (res.body.ErrCode == 0){
		            		that.hasSolt = true
		            		that.openMessage("新顺序保存成功！",'success')
		            	} else {
		            		that.openMessage("新顺序保存失败！",'error')
		            	}
		            },function(res){
		            	that.openMessage("网络错误，请重新！",'error')
		            })
			    },
    		    //获取所有领导信息
			    fnGetLeaders(){
			    	var that = this
		            Svc.fnGetData('/api/leader/fetch',{},function(res){
		            	if (res.body.ErrCode == 0){
		            		that.leaders = res.body.Data
		            	} else {
		            		that.openMessage("所有领导信息获取失败！",'error')
		            	}
		            },function(res){
		            	that.openMessage("网络错误，请重新！",'error')
		            })
			    },
    		    //删除
			    fnDelete(id){
			    	var that = this
			    	that.$confirm('您确认进行删除操作吗？', '提示', {
						type: 'warning'
					}).then(function(){
						Svc.fnPostData('/api/leader/hide',{ID:id},function(res){
			            	if (res.body.ErrCode == 0){
			            		that.openMessage("删除操作成功！",'success')
			            		that.fnGetLeaders()
			            	} else {
			            		that.openMessage("删除操作失败！",'error')
			            	}
			            },function(res){
			            	that.openMessage("网络错误，请重新！",'error')
			            })
					})
			   },
			   //打开更新领导页面
			    fnOpenAddLeader(account,name){
			    	var that = this
			    	that.addFormVisible = true
			    	that.current.account = account
			    	that.current.name = name
			    	//获取当前领导的原有信息
		      		that.fnGetLeader()
			    },
			    //添加领导照片成功
		        handleAvatarSuccess(res, file) {
		        	this.imageUrl = URL.createObjectURL(file.raw);
		        	this.addForm.Photo = res.Data.Key
		      	},
		      	//获取当前领导的原有信息
		      	fnGetLeader(){
		      		var that = this
		            Svc.fnGetData('/api/leader/detail/' + that.current.account,{},function(res){
		            	if (res.body.ErrCode == 0){
		            		if (res.body.Data) {
		            			that.imageUrl = res.body.Data.Photo
			            		that.addForm.Title = res.body.Data.Title
								that.addForm.Remark = res.body.Data.Remark
								that.addForm.Phone = res.body.Data.Phone
		            		}
		            	} else {
		            		that.openMessage("获取领导信息失败！" + res.body.ErrMsg,'error')
		            	}
		            },function(res){
		            	that.openMessage("网络错误，请重新！",'error')
		            })
		      	},
			    //更新领导信息
			    fnAddLeader(){
			    	var that = this
			    	var params = {
			    		EmpID : that.current.account,
						EmpName : that.current.name,
						Photo : that.addForm.Photo,
						Title : that.addForm.Title,
						Remark : that.addForm.Remark,
						Phone : that.addForm.Phone
			    	}
		            Svc.fnPostData('/api/leader/save',params,function(res){
		            	if (res.body.ErrCode == 0){
		            		that.addFormVisible = false
		            		that.openMessage("领导信息更新成功！",'success')
		            		that.fnGetLeaders()
		            	} else {
		            		that.openMessage("领导信息更新失败！" + res.body.ErrMsg,'error')
		            	}
		            },function(res){
		            	that.openMessage("网络错误，请重新！",'error')
		            })
			    }
			},
			mounted() {
				//获取所有领导信息
			    this.fnGetLeaders()
			}
	}
</script>

<style scoped>
	.leader-list{
		width: 100%;
		margin-top: 20px;
	}

	.toolbar {
	    background: #f2f2f2;
	    padding: 10px;
	    margin: 10px 0;
	}
	
	.sort{
		position: absolute;
		right: 3%;
	}
	
	.sort-icon{
	    font-size: 23px;
	    margin-right: 6px;
	    margin-top: 3px;
	    cursor: pointer;
	}
	
	.avatar-uploader {
	    width: 150px;
    	height: 200px;
	    border: 1px dashed #d9d9d9;
	    border-radius: 6px;
	    cursor: pointer;
	    position: relative;
	    overflow: hidden;
	}
	.avatar-uploader:hover {
	    border-color: #409EFF;
	}
	.avatar-uploader-icon {
	    font-size: 28px;
	    color: #8c939d;
	    width: 150px;
	    height: 200px;
	    line-height: 200px;
	    text-align: center;
	}
	.avatar {
	    width: 150px;
	    height: 200px;
	    display: block;
	}
	
	.update-leader{
		color: #409eff;
		cursor: pointer;
	}
</style>